<!--
 * @Author: 菜鸟裹裹 675687356@qq.com
 * @Date: 2025-06-16 15:15:38
 * @LastEditors: 菜鸟裹裹 675687356@qq.com
 * @LastEditTime: 2025-06-16 15:15:59
 * @FilePath: /customer-service-web/src/views/label-appeal/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->

<template>
    <div class="form-container">
   <el-form :inline="true" :model="formInline" ref="formRef" label-width="170px" label-position="right" class="demo-form">
    <el-form-item label="类型" prop="classOther">
        <el-select v-model="formInline.classOther" placeholder="请选择规则" style="width:169px"  >
          <el-option v-for="item in Typeoption" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="标签名称" prop="labelName">
      <el-input v-model="formInline.labelName" placeholder="请输入"  class="right-align-input" />
    </el-form-item>
    <el-form-item label="创建类型" prop="createType">
      <el-select v-model="formInline.createType" placeholder="请选择规则"  style="width: 169px" >
          <el-option  v-for="item in createTypeoption" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
    </el-form-item>
    <el-form-item >
      <!-- <div class="flex justify-end gap-2"> -->
        <el-button   type="primary" @click="onSubmit">查 询</el-button>
      <el-button    @click="reset">重置</el-button>
    <!-- </div> -->
    </el-form-item>
  </el-form>
</div>
<div class="table">
   <div class="table_heard"> <div class="heard_left">
    <span>数据明细</span>
   </div> <div class="heard_right">
      <el-button  @click="logsonSubmit">日志</el-button>
      <el-button    @click="addonSubmit">新增</el-button>
      <el-button  @click="importonSubmit">导入</el-button>
    </div>
</div>

  <el-table :data="tableData"
                border
                v-loading="dataLoading"
                style="width: 100%;margin-bottom: 20px;margin-top: -1px;height: 70vh">
        <el-table-column label="序号" type="index" width="100" />
        <el-table-column prop="classOther" label="类型" min-width="160px">
          <template #default="scope">
          <span v-show="scope.$index !== editIndex">{{ scope.row.classOther }}</span>
          <!-- <el-input
            v-model="scope.row.value"
          ></el-input> -->
          <el-select  v-show="scope.$index === editIndex" v-model="scope.row.classOther" placeholder="请选择规则" style="width:169px" >
          <el-option v-for="item in Typeoption" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        </template>
        </el-table-column>
        <el-table-column prop="labelName" label="标签名称" min-width="160px">
          <template #default="scope">
          <span v-show="scope.$index !== lableeditIndex">{{ scope.row.labelName }}</span>
          <el-input
          v-show="scope.$index === lableeditIndex"
            v-model="scope.row.labelName"
          ></el-input>
        </template>
        </el-table-column>
        <el-table-column prop="createTimeStr" label="创建时间"  min-width="100px">
        </el-table-column>
        <el-table-column prop="createType"  label="创建类型" min-width="120px">
        </el-table-column>
        <el-table-column prop="voltageLevel"  label="操作" min-width="90px">
            <template #default="{ row }">
        <div>
        <el-button link type="primary" size="small" @click="handleEditClick(row)">
          编辑
        </el-button>
        <el-button type="primary"  size="small" link @click="handleSave(row)">保存</el-button>
        <el-button link type="primary" size="small" @click="handleDeleteClick(row)">删除</el-button>
        </div>
        <!-- <template #default="{ row }">
             <template v-if="row.isEditing">
            <el-button size="small" type="primary" @click="handleSave(row)">保存</el-button>
            <el-button size="small" @click="cancelEdit(row)">取消</el-button>
          </template>
          <template v-else>
            <el-button size="small" type="text" @click="handleEditClick(row)">编辑</el-button>
            <el-button link type="primary" size="small" @click="handleDeleteClick(row)">删除</el-button>
          </template> -->
      </template>
        </el-table-column>

      </el-table>
      <el-pagination
          class="pagination"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-size="size"
          layout="total, prev, pager, next, jumper"
          :total="total"
      />
</div>
   <logs
        ref="childRef"
      :propData="parentData"
      @confirm="handleConfirm"></logs>
     <el-dialog v-model="adddialogTableVisible" title="新增标签" width="800" >
        <el-form :inline="true" :model="formInlineadd" ref="addformRef" label-width="120px" label-position="right" class="demo-form">
    <el-form-item label="类型" prop="classOther">
        <el-select v-model="formInlineadd.classOther" placeholder="请选择规则" style="width:169px" >
          <el-option v-for="item in Typeoption" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="标签名称" prop="labelName">
      <el-input v-model="formInlineadd.labelName" placeholder="请输入" class="right-align-input" />
    </el-form-item>
    <el-form-item >
      <!-- <div class="flex justify-end gap-2"> -->
        <el-button  style="background-color: #01367A;" type="primary" @click="onSubmitsave">保存</el-button>
     
    <!-- </div> -->
    </el-form-item>
  </el-form>
  </el-dialog>
  <el-dialog v-model="UploadExcelDialogShow" title="上传数据" width="20%">
    <el-upload
        class="upload-demo"
        multiple
        method="post"
        :action="uploadAction"
        style="margin-left: 200px"
        accept=".xlsx,.xls"
        :show-file-list="false"
        :on-success="handleSuccess"
        :before-upload="beforeUploadHandle"
        name="files"
    >
      <el-button style="margin-left: 100px;" type="primary">导入</el-button>
    </el-upload>
  </el-dialog>
  </template>
  <script setup>
  import { onMounted, reactive, ref,computed } from "vue";
  import Logs from './components/logs.vue'
  import utils from "@/utils/utils";
  import store from "@/store";
  import { ElMessage } from 'element-plus'
  import {
    getaddsavelist,
    gettaglist,
    getupdatelist,
    getdeletelist
  } from "@/api/work-order";
  import { isSameDate } from "@/utils/common";
  const apiBaseUrl=import.meta.env.VITE_API_URL
  const uploadAction = computed(() => `${apiBaseUrl}/import/requestTag?operationUser=${OperationUser}`);
  let headers = {};
  const upLoadLoading = ref(false);
  const UploadExcelDialogShow = ref(false);
  const total = ref(0);
  const page = ref(1);
  const size = ref(10);
  const tableData = ref();
  const dataLoading = ref(false);
  const selectTimeDialogShow = ref(false);
  const timeModelValue = ref("");
  const gkDate = ref("");
  const gkDesc = ref("");
  const region=ref('');
  const unreadRows=ref(false);
  const editIndex=ref(-1)
  const lableeditIndex=ref(-1)
  const childRef = ref(null)
  const adddialogTableVisible=ref(false)
  const formRef=ref('')
  const addformRef=ref('')
  const OperationUser = store.getters.userInfo.userName
  const formInline = reactive({
    classOther: '',
    labelName: '',
    createType: '',

})
const formInlineadd = reactive({
    classOther: '',
    labelName: '',
    createType: '手动创建',

})
const Typeoption=[
  { value: '抄核收', label: '抄核收' },
  { value: '市场化交易户', label: '市场化交易户' },
  { value: '用电变更', label: '用电变更' },
  { value: '业扩报装（含充电桩报装）', label: '业扩报装（含充电桩报装）' },
  { value: '计量装置', label: '计量装置' },
  { value: '光伏', label: '光伏' },
  { value: '服务渠道', label: '服务渠道' },
  { value: '用电检查', label: '用电检查' },
  { value: '客户信息查询', label: '客户信息查询' },
  { value: '停电问题', label: '停电问题' },
  { value: '电压质量', label: '电压质量' },
  { value: '电力实施问题', label: '电力实施问题' },
];
const createTypeoption=[
{ value: 'AI创建', label: 'AI创建' },
{ value: '手动创建', label: '手动创建' },
];
const parentData = reactive({
  name: '1',
  id: 1
})
const reset =()=>{
  formRef.value.resetFields()
  // console.log("2222");
}
const handleConfirm = (data) => {
  console.log('子组件返回的数据:', data)
}
const logsonSubmit=()=>{
    childRef.value.openDialog()
  };

const onSubmit =  () => {
    console.log(OperationUser);
    dataLoading.value = true
    let pems ={
        operationUser:OperationUser,
        classOther: formInline.classOther,
        labelName: formInline.labelName,
        createType: formInline.createType,
        page:page.value,
        size:size.value

    }
    gettaglist(pems).then((res)=>{
      console.log(res);
      tableData.value = res.list
      total.value = res.total
    })
    dataLoading.value = false
  }
  const addonSubmit=()=>{
    adddialogTableVisible.value=true
  }
//
// getTime()
 //表格编辑
 const handleEditClick=(row)=>{
  editIndex.value = tableData.value.indexOf(row)
  lableeditIndex.value = tableData.value.indexOf(row)
  console.log(editIndex.value,"editIndex.value");
    console.log("表格编辑");
 }

 const handleSave = async (row) => {
  editIndex.value = -1
  lableeditIndex.value = -1
  // console.log(tableData.value)
  let prems ={
        id:row.id,
        classOther:row.classOther,
        labelName:row.labelName,
        createType:row.createType,
        operationUser:OperationUser,
  }
  const result = await getupdatelist(prems)
  if(result){
    ElMessage({
    message: '保存成功',
    type: 'success',
    plain: true,
    })
     onSubmit()
  }

    // console.log(res);


  // onSubmit()
}

const handleDeleteClick =async(row) => {
  tableData.value.splice(tableData.value.indexOf(row), 1)
  let prems ={
        id:row.id,
        classOther:row.classOther,
        labelName:row.labelName,
        createType:row.createType,
        operationUser:OperationUser,
  }
  const result = await getdeletelist(prems)
    if(result){
       ElMessage({
       message: '删除成功',
       type: 'success',
       plain: true,
    })
    onSubmit()
 }
    // console.log(res);


}
  const importonSubmit=()=>{
    UploadExcelDialogShow.value=true
  }
   //新增
   const onSubmitsave=async()=>{
    let prems ={
        operationUser:OperationUser,
        classOther: formInlineadd.classOther,
        labelName: formInlineadd.labelName,
        createType: formInlineadd.createType,
    }
    const result = await getaddsavelist(prems)
   if(result){
          ElMessage({
            message: '新增成功',
            type: 'success',
            plain: true,
    })
    adddialogTableVisible.value=false
    formRef.value.resetFields()
    onSubmit()
   }
       
    adddialogTableVisible.value=false
   }
const beforeUploadHandle = (file) => {
  utils.showLoadding('正在上传...')
  return true
}

const handleSuccess = async (res) => {
  if (res.content === 0||res.content === null) {
    utils.showSuccess('上传数据成功')
  } else {
    utils.showError('有' + res.content + '数据失败')
  }
  UploadExcelDialogShow.value = false
  utils.hideLoadding()
  onSubmit()
}
  /**
   * size 改变触发
   */
  const handleSizeChange = currentSize => {
    size.value = currentSize
    onSubmit()
  }
  /**
   * 页码改变触发
   */
  const handleCurrentChange = currentPage => {
    page.value = currentPage
    onSubmit()
  }

  onMounted(() => {
    headers = { "X-Token": store.getters.token };
    onSubmit()

  });
  </script>
  <style scoped >
  .form-container {
    /* max-width: 1200px; */
    /* margin: 0 auto; */
    padding: 20px;


  }

  .table_heard{
    height: 45px;
    width:100%;
    border:1px solid #d9dbe2  ;
    border-radius:3px;
    display: flex;
    justify-content: space-between;
}
.heard_left{
    padding: 10px
}
.heard_right{
    padding: 5px
}
  /* 查询按钮容器样式 */
.query-button-container {
  display: flex;
  justify-content: flex-end;
  /* margin-top: 20px; */
}
  /* 输入框右对齐样式 */
  .right-align-input {
  display: flex;
  justify-content: flex-end;
}
  /* 响应式布局 */
  @media (max-width: 768px) {
    .demo-form {
      label-width: 80px;
    }
  }

  @media (max-width: 576px) {
    .demo-form {
      label-width: 60px;
    }
  }
  </style>
